<template>
    <div>
        <a-collapse accordion defaultActiveKey="2"  :bordered="false">
            <a-collapse-panel header="邮箱变更" key="2" >
                <a-form :form="updateEmail.form" @submit="handleUpdateProfileEmail">
                    <a-form-item v-bind="formItemLayout" label="邮箱">
                        <a-input
                                v-decorator="['email',{initialValue:email(), rules: [{ type: 'email', required: true, message: '邮箱地址格式错误 ' }]}]"
                                placeholder="学员邮箱地址"/>
                    </a-form-item>
                    <a-form-item :wrapperCol = '{ span: 17, offset: 5 }'>
                        <a-button
                                :loading="updateEmail.submitBtn.loading"
                                :disabled="updateEmail.submitBtn.disabled"
                                type="primary"
                                html-type="submit" >确认
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-collapse-panel>
            <a-collapse-panel header="手机变更" key="3" >
                <a-form :form="updatePhone.form" @submit="handleUpdateProfilePhone">
                    <a-form-item v-bind="formItemLayout" label="手机">
                        <a-input
                                autocomplete="false"
                                placeholder="填写手机号码"
                                v-decorator="['phone', {initialValue:phone(),rules: [{ required: true,  pattern:new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/), message: '手机格式错误'}]}]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item :wrapperCol = '{ span: 17, offset: 5 }'>
                        <a-button type="primary"
                                  :loading="updatePhone.submitBtn.loading"
                                  :disabled="updatePhone.submitBtn.disabled"
                                  html-type="submit" >确认
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-collapse-panel>
            <a-collapse-panel header="密码变更" key="1" >
                <a-form :form="updatePassword.form" @submit="handleUpdateProfilePassword">
                    <!--密码-->
                    <a-form-item v-bind="formItemLayout" label="密码">
                        <a-input
                                type="password"
                                autocomplete="false"
                                placeholder="至少6位密码，区分大小写"
                                v-decorator="['password', {rules: [{ required: true,min:6, message: '至少6位密码，区分大小写'}]}]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item v-bind="formItemLayout" label="确认密码">
                        <a-input
                                type="password"
                                autocomplete="false"
                                placeholder="重复输入密码"
                                v-decorator="['password_confirmation', {rules: [{ required: true, message: '请再次输入密码' }, { validator: handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
                        ></a-input>
                    </a-form-item>
                    <a-form-item :wrapperCol = '{ span: 17, offset: 5 }'>
                        <a-button type="primary"
                                  :loading="updatePassword.submitBtn.loading"
                                  :disabled="updatePassword.submitBtn.disabled"
                                  html-type="submit" >确认
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-collapse-panel>
        </a-collapse>
    </div>

</template>

<script>
    import {UserMixin} from "../../MacroMixin";
    import {EduMixin} from "../../mixin";

    export default {
        data() {
            return {
                data: [
                    {
                        title: '账户密码', description: '', value: '', actions: {
                            key: 'password',
                            title: '账户密码',
                        }
                    },
                    {
                        title: '绑定手机', description: '已绑定手机', value: '138****8293', actions: {
                            title: '绑定手机', key: 'phone'
                        }
                    },
                    {
                        title: '绑定邮箱',
                        description: '已绑定邮箱',
                        value: 'ant***sign.com',
                        actions: {
                            title: '绑定邮箱', key: 'email',
                        }
                    },
                ],
                formItemLayout: {
                    labelCol: {span: 5},
                    wrapperCol: {span: 12},
                },
                visible: false,
                title: '',
                form: this.$form.createForm(this, {name: 'coordinated'}),
                key: {
                    password: false,
                    phone: false,
                    email: false
                },

                updatePassword: {
                    form: this.$form.createForm(this),
                    submitBtn: {
                        loading: false,
                        disabled: false
                    },
                },

                updateEmail: {
                    form: this.$form.createForm(this),
                    submitBtn: {
                        loading: false,
                        disabled: false
                    },
                },

                updatePhone: {
                    form: this.$form.createForm(this),
                    submitBtn: {
                        loading: false,
                        disabled: false
                    },
                }
            }
        },
        mixins: [UserMixin, EduMixin],
        methods: {
            handleUpdateProfileEmail(e) {
                e.preventDefault();
                this.updateEmail.submitBtn.loading = true;
                this.updateEmail.submitBtn.disabled = true;
                this.updateEmail.form.validateFields((error, values) => {
                    if(!error) {
                        this.e$user.__updateCurrentProfile(values).then(res => {
                            if( res.code === 0 ) {
                                this.SET_EMAIL(res.profile.email);
                                this.$message.success('更新成功');
                            } else {
                                this.__alertResponseException(res.error);
                            }
                            this.updateEmail.submitBtn.loading = false;
                            this.updateEmail.submitBtn.disabled = false;
                        });
                    }
                });
            },
            handleUpdateProfilePhone(e) {
                e.preventDefault();
                this.updatePhone.submitBtn.loading = true;
                this.updatePhone.submitBtn.disabled = true;
                this.updatePhone.form.validateFields((error, values) => {
                    if(!error) {
                        this.e$user.__updateCurrentProfile(values).then(res => {
                            if( res.code === 0 ) {
                                this.SET_PHONE(res.profile.phone);
                                this.$message.success('更新成功');
                            } else {
                                this.__alertResponseException(res.error);
                            }
                            this.updatePhone.submitBtn.loading = false;
                            this.updatePhone.submitBtn.disabled = false;
                        });
                    }
                });
            },
            handleUpdateProfilePassword(e) {
                e.preventDefault();
                this.updatePassword.submitBtn.loading = true;
                this.updatePassword.submitBtn.disabled = true;
                this.updatePassword.form.validateFields((error, values) => {
                    if(!error) {
                        this.e$user.__updateCurrentProfile(values).then(res => {
                            if( res.code === 0 ) {
                                this.updatePassword.form.resetFields();
                                this.$message.success('更新成功');
                            } else {
                                this.__alertResponseException(res.error);
                            }
                        });
                    }
                });
                this.updatePassword.submitBtn.loading = false;
                this.updatePassword.submitBtn.disabled = false;
            },
            handlePasswordCheck(rule, value, callback) {
                const password = this.updatePassword.form.getFieldValue('password');
                if( value && password && (value.trim() === password.trim()) ) {
                    callback();
                } else {
                    callback(new Error('两次密码输入不一致'));
                }
            },

        }
    }
</script>

<style scoped>

</style>
